<template>
    <el-form
        ref="formRef"
        size="large"
        class="login-content-form"
        :rules="rules"
        :model="state.ruleForm"
    >
        <el-form-item class="login-animation1" prop="tenantId">
            <el-input
                text
                :placeholder="'请输入单位编号'"
                v-model="state.ruleForm.tenantId"
                clearable
                autocomplete="off"
            >
                <template #prefix>
                    <el-icon class="el-input__icon"><ele-User /></el-icon>
                </template>
            </el-input>
        </el-form-item>
        <el-form-item class="login-animation1" prop="username">
            <el-input
                text
                :placeholder="'请输入用户名'"
                v-model="state.ruleForm.username"
                clearable
                autocomplete="off"
            >
                <template #prefix>
                    <el-icon class="el-input__icon"><ele-User /></el-icon>
                </template>
            </el-input>
        </el-form-item>
        <el-form-item class="login-animation2" prop="password">
            <el-input
                :type="state.isShowPassword ? 'text' : 'password'"
                :placeholder="'请输入密码'"
                v-model="state.ruleForm.password"
                autocomplete="off"
            >
                <template #prefix>
                    <el-icon class="el-input__icon"><ele-Unlock /></el-icon>
                </template>
                <template #suffix>
                    <i
                        class="iconfont el-input__icon login-content-password"
                        :class="state.isShowPassword ? 'icon-yincangmima' : 'icon-xianshimima'"
                        @click="state.isShowPassword = !state.isShowPassword"
                    ></i>
                </template>
            </el-input>
        </el-form-item>
        <el-form-item class="login-animation3" prop="code">
            <el-col :span="13">
                <el-input
                    text
                    maxlength="4"
                    :placeholder="'请输入验证码'"
                    v-model="state.ruleForm.code"
                    clearable
                    autocomplete="off"
                >
                    <template #prefix>
                        <el-icon class="el-input__icon"><ele-Position /></el-icon>
                    </template>
                </el-input>
            </el-col>
            <el-col :span="1"></el-col>
            <el-col :span="7" style="display: flex; align-items: center">
                <img class="login-content-code" :src="codeImg" alt="" />
            </el-col>
            <el-col :span="3">
                <div class="login-content-code-fresh" @click="getCode">
                    <SvgIcon :name="'iconfont icon-shuaxin'" />
                    <span>刷新</span>
                </div>
            </el-col>
        </el-form-item>
        <el-form-item class="login-animation4">
            <el-button
                type="primary"
                class="login-content-submit"
                round
                v-waves
                @click="onSignIn"
                :loading="state.loading.signIn"
            >
                <span>登 录</span>
            </el-button>
        </el-form-item>
    </el-form>
</template>

<script setup lang="ts" name="loginAccount">
import { reactive, computed, onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { Session } from '/@/utils/storage';
import { formatAxis } from '/@/utils/formatTime';
import useLoginApi from '/@/api/login';
import { initBackEndControlRoutes } from '/@/router/backEnd';

// 定义变量内容
const route = useRoute();
const router = useRouter();
const codeImg = ref();
const formRef = ref();
const state = reactive<any>({
    isShowPassword: false,
    ruleForm: {
        username: 'huawei',
        password: '123456',
        tenantId: '000000',
        code: null,
        grantType: 'password',
        uuid: '',
        clientId: 'e5cd7e4891bf95d1d19206ce24a7b32e'
    },
    loading: {
        signIn: false
    }
});

const rules = reactive({
    username: [{ required: true, message: '请输入用户名称', trigger: 'blur' }],
    password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
    code: [{ required: true, message: '请输入验证码', trigger: 'blur' }]
});

// 时间获取
const currentTime = computed(() => {
    return formatAxis(new Date());
});

// 登录
const onSignIn = async () => {
    const isPass = await formRef.value.validate((valid: boolean) => valid);
    if (!isPass) return;
    state.loading.signIn = true;
    let userTokenRes: any;
    await useLoginApi
        .signIn(state.ruleForm)
        .then((res: any) => {
            userTokenRes = res;
        })
        .catch((error: any) => {
            if (error.msg === 'Captcha error') {
                ElMessage.error('验证码输入错误');
            } else {
                ElMessage.error(error.msg);
            }
            getCode();
            state.loading.signIn = false;
        });
    if (!userTokenRes) return;
    // 存储 token 到浏览器缓存
    Session.set('token', userTokenRes.data.access_token);
    // 后端控制路由
    const isNoPower = await initBackEndControlRoutes();
    signInSuccess(isNoPower);
};
// 登录成功后的跳转
const signInSuccess = (isNoPower: boolean | undefined) => {
    if (isNoPower) {
        ElMessage.warning('抱歉，您没有登录权限');
        Session.clear();
    } else {
        // 初始化登录成功时间问候语
        let currentTimeInfo = currentTime.value;
        // 登录成功，跳到转首页
        // 如果是复制粘贴的路径，非首页/登录页，那么登录成功后重定向到对应的路径中
        if (route.query?.redirect) {
            router.push({
                path: <string>route.query?.redirect,
                query:
                    Object.keys(<string>route.query?.params).length > 0
                        ? JSON.parse(<string>route.query?.params)
                        : ''
            });
        } else {
            router.push('/');
        }
        // 登录成功提示
        const signInText = '欢迎回来！';
        ElMessage.success(`${currentTimeInfo}，${signInText}`);
    }
    state.loading.signIn = false;
};

const getCode = () => {
    // 验证码获取
    useLoginApi
        .getCode()
        .then((res: any) => {
            codeImg.value = 'data:image/png;base64,' + res.data.img;
            state.ruleForm.uuid = res.data.uuid;
        })
        .catch(() => {
            ElMessage.error('验证码获取失败');
        });
};

onMounted(() => {
    getCode();
});
</script>

<style scoped lang="scss">
.login-content-form {
    margin-top: 20px;
    @for $i from 1 through 4 {
        .login-animation#{$i} {
            opacity: 0;
            animation-name: error-num;
            animation-duration: 0.5s;
            animation-fill-mode: forwards;
            animation-delay: calc($i/10) + s;
        }
    }
    .login-content-password {
        display: inline-block;
        width: 20px;
        cursor: pointer;
        &:hover {
            color: #909399;
        }
    }
    .login-content-code {
        width: 110px;
        padding: 0;
        height: 40px;
        font-weight: bold;
        letter-spacing: 5px;
    }
    .login-content-submit {
        width: 100%;
        letter-spacing: 2px;
        font-weight: 300;
        margin-top: 15px;
    }
}
.login-content-code-fresh {
    cursor: pointer;
}
.login-content-code-fresh:hover {
    color: #49c1f8;
}
</style>
